<template>
	<view>
		<view class="yxfooter" v-if="data_list.length > 0 && is_tabber">
		    <view class="h50--"></view>
		    <view class="neifoot bottom-line-exclude" :style="yxfooterstyle">
		        <view class="neitop">
		            <view class="weui-flex">
						<block v-for="(item, index) in data_list" :key="index">
							<view class="weui-flex__item pr" :data-value="item.pagePath" data-type="1" @tap="navigation_event">
							    <view v-if="propStatus == item.pagePath" class="on">
							        <image class="topavatar" :src="item.selectedIconPath" />
							        <text class="title" :style="'color:'+foot_tabbar_text_color_on">{{item.text}}</text>
							    </view>
							    <view v-else>
							        <image class="topavatar" :src="item.iconPath" />
							        <text class="title" :style="'color:'+foot_tabbar_text_color">{{item.text}}</text>
							    </view>
								<view v-if="item.pagePath == '/pages/cart/cart'" class="cart_num_box pa">
									<component-badgeyx :propNumber="foot_car_num" propColor="#ffffff" propBgColor="#FF3B30"></component-badgeyx>
								</view>
							</view>
						</block>
		            </view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import componentBadgeyx from "@/pages/common/badge/badge";
	const app = getApp();
	import {system_base_info} from "@/common/js/common/common";
	
	var common_static_url = app.globalData.get_static_url('common');
	export default {
		data() {
			return {
				common_static_url: common_static_url,
				data_list: [],
				foot_tabbar_bg_color:'#ffffff',
				foot_tabbar_text_color:'#8a8a8a',
				foot_tabbar_text_color_on:'#c32a2c',
				yxfooterstyle:'',
				foot_car_num:0,
				is_tabber:false,
			}
		},
		components: {
		    componentBadgeyx
		},
		props: {
		    propStatus: {
				type: [Number,String],
				default: '/pages/index/index'
			},
			propCartNum: {
				type: [Number,String],
				default: 0
			},
			propRandom: {
				type: [String,Number],
				default: 0
			}
		},
		// 属性值改变监听
		watch: {
			propCartNum(value, old_value) {
			    this.setData({
			        foot_car_num: value,
			    });
			},
			// 数据
			propRandom(value, old_value) {
				this.init_before();
			}
		},
		// 页面被展示
		created: function() {
			this.init_before();
		},
		methods: {
			init_before(){
				// 先获取语言基础信息
				system_base_info()
				.then(data=>{
					// #ifdef APP-PLUS
					if(app.globalData.check_app_disagree_simple()){
						this.init_config(data);
					}
					// #endif
					// #ifndef APP-PLUS
					this.init_config(data);
					// #endif
				});
			},
			// 初始化配置
			init_config(data) {//console.log('----->footer data');console.log(data);
			    let bottomsafeHeight = 0;
				var fccuniapp_data = data.base;
				var foot_tabbar_bg_color = fccuniapp_data.foot_tabbar_bg_color;
				var yxfooterstyle = 'background:'+foot_tabbar_bg_color+';';//height:calc(96rpx + '+bottomsafeHeight+'px);
				var is_tabber = ((fccuniapp_data.is_close_foot_nav || null) != null && parseInt(fccuniapp_data.is_close_foot_nav) == 1) ? false : true;
				this.setData({
					data_list: fccuniapp_data.foot_nav || [],
					foot_tabbar_bg_color: foot_tabbar_bg_color,
					yxfooterstyle:yxfooterstyle,
					foot_tabbar_text_color: fccuniapp_data.foot_tabbar_text_color || '#8a8a8a',
					foot_tabbar_text_color_on: fccuniapp_data.foot_tabbar_text_color_on || '#c32a2c',
					is_tabber: is_tabber,
				});
				if(is_tabber)
				{
					this.$emit('onFooterHeight', 52);//赋予一个特殊值
				}
			},
			
			navigation_event(e) {
				app.globalData.operation_event(e);
			}
		}
	}
</script>

<style lang="scss">
/*公共样式*/
.yxfooter .h50 {
    height: 100rpx;
}
.yxfooter .neifoot {
    height: 96rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #eee;
    z-index: 103;
}
/* #ifdef H5 */
@media only screen and (min-width:800px) {
   .yxfooter .neifoot {
	   max-width: 800px !important;
	   left:50%;
	   margin-left:-400px;
   }
}
/* #endif */
.yxfooter .h60 {
    height: 60px;
    width: 100%;
    display: block;
}
.yxfooter .neitop {
    padding: 6rpx 0;
    font-size: 24rpx;
    text-align: center;
    position: relative;
}
.yxfooter .neitop .topavatar {
    width: 50rpx;
    height: 50rpx;
    display: block;
    margin: auto;
}
.yxfooter .neitop .topavatar2 {
    width: 80rpx;
    height: 80rpx;
    display: block;
    margin: auto;
    border-radius: 40rpx;
    background: #fff;
    position: relative;
}
.yxfooter .neitop .topavatar2 .topavatar {
    position: absolute;
    left: 15rpx;
    top: 15rpx;
}
.yxfooter .neitop .title {
    line-height: 40rpx;
}
.cart_num_box{width:22rpx;height:20rpx;left:60%;top:-10rpx;}
</style>